<template>
  <button @click="emitValue">传递字符串</button>
  <button @click="emitSubmit">提交对象</button>
</template>

<script setup lang="ts">
// 定义事件载荷类型
interface SubmitPayload {
  id: number;
  status: string;
}

interface Emits {
  (e: "update:value", val: string): void;
  //e表示事件名称（event name）
  // 'update:value'是特定的字符串字面量类型这是一种 Vue 约定的命名格式，专门用于实现自定义组件的 v-model 双向绑定
  //: void‌表示该函数没有返回值，这是事件触发函数的固定返回类型
  (e: "submit", payload: SubmitPayload): void;
}

const emit = defineEmits<Emits>();

const emitValue = () => {
  emit("update:value", "Hello from child");
};

const emitSubmit = () => {
  emit("submit", { id: 123, status: "success" });
};
</script>
